<template>
  <div class="mainor">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10 paddingBottom0">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>库区管理</span>
          </div>
        </div>

        <div class="marginBottom5 marginTop15">
          <div class="mainor_form">
            <div>
              <el-button
                @click="title(0, (addedFormVisible = true), (type = 0))"
                >添加库区</el-button
              >
            </div>
          </div>

          <div class="main_tree">
            <h3 class="main_tree_h boxdq">
              <span>分类</span>
              <span>管理操作</span>
            </h3>
            <div class="main_tree_b">
              <el-tree
                :data="list"
                node-key="id"
                ref="tree"
                v-loading="listLoading"
                element-loading-text="加载中"
                :expand-on-click-node="false"
                :default-expand-all="true"
                icon-class="el-icon-arrow-right"
                highlight-current
                :props="defaultProps"
                style="min-height: 560px"
              >
                <span
                  class="custom-tree-node on"
                  slot-scope="{ node, data }"
                  @mouseover="data.show = true"
                  @mouseleave="data.show = false"
                >
                  <span>
                    {{ node.label }}
                  </span>
                  <span>
                    <el-link
                      type="warning"
                      @click="
                        title(
                          1,
                          (addedFormVisible = true),
                          (type = 1),
                          (info.second_id = data.id)
                        )
                      "
                      v-if="node.level == 1"
                      >添加货架</el-link
                    >
                    <el-link
                      type="warning"
                      @click="
                        title(
                          3,
                          (addedFormVisible = true),
                          (type = 3),
                          (info.third_id = data)
                        )
                      "
                      v-if="node.level == 2"
                      >添加货位</el-link
                    >

                    <el-link
                      v-if="data.company_id > 0 ? true : false"
                      type="primary"
                      @click.stop="
                        title(
                          2,
                          (addedFormVisible = true),
                          (type = 2),
                          (id = data.id),
                          (info.title = data.title)
                        )
                      "
                      >编辑</el-link
                    >
                    <el-link type="danger" @click="delet(data.id)"
                      >删除</el-link
                    >
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="title_txt"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
      :visible.sync="addedFormVisible"
      class="main_dialog dialog450"
    >
      <el-form
        :inline="false"
        :model="info"
        :rules="rules"
        class="demo-form-inline"
        ref="userListFrom"
      >
        <el-form-item :label="txt" prop="title">
          <el-input
            v-model.trim="info.title"
            placeholder="请输入名称"
            clearable
            class="wid290"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="(addedFormVisible = false), close()"
          >取 消</el-button
        >
        <el-button type="primary" @click="setupmine" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reservoir_index,
  reservoir_add,
  reservoir_edit,
  reservoir_del
} from "@/api/warehouse/warehouseNow";
import rules from "@/rules/warehouse/warehouseWithdrawal_add";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  components: {},
  data() {
    return {
      // 树型tree
      defaultProps: {
        children: "selfNext",
        label: "title"
      },
      // 增加和编辑
      info: {
        title: "",
        second_id: "",
        third_id: ""
      },
      id: "",
      type: 0,
      addedFormVisible: false,
      // 验证
      rules,
      // 列表数据
      list: [],
      listLoading: false,
      // 监听滚动
      searchBarFixed: false,
      title_txt: "",
      txt: ""
    };
  },

  methods: {
    // 关闭清空表单
    close() {
      this.info = {
        title: "",
        third_id: 0,
        third_id: 0
      };
      this.$refs["userListFrom"].clearValidate();
    },

    // 删除
    delet(id) {
      this.$confirm("是否删除分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });

      this.$confirm("是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {
          this.reservoir_del(id);
        })
        .catch(() => {});
    },
    //彻底删除
    reservoir_del(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id })) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id: id }
      );
      reservoir_del(data).then(res => {
        if (res.errcode == 0) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.reservoir_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 列表
    reservoir_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      reservoir_index(data).then(res => {
        this.listLoading = false;
        if (res.errcode == 0) {
          res.data.forEach(e => {
            e.show = false;
            if (e.selfNext.length != 0) {
              e.selfNext.forEach(p => {
                p.show = false;
              });
            }
          });
          this.list = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 新增保存
    add() {
      let info = {};
      if (this.type == 0) {
        info = {
          title: this.info.title
        };
      }
      if (this.type == 1) {
        info = {
          title: this.info.title,
          second_id: this.info.second_id
        };
      }
      if (this.type == 3) {
        info = {
          title: this.info.title,
          second_id: this.info.third_id.second_id,
          third_id: this.info.third_id.id
        };
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        info
      );
      reservoir_add(data).then(res => {
        this.addedFormVisible = false;
        if (res.errcode == 0) {
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.reservoir_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 编辑保存
    edit() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                id: this.id,
                title: this.info.title
              })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id: this.id, title: this.info.title }
      );
      reservoir_edit(data).then(res => {
        this.addedFormVisible = false;
        if (res.errcode == 0) {
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          this.reservoir_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 确认
    setupmine() {
      this.$refs["userListFrom"].validate(valid => {
        if (valid) {
          this.type == 2 ? this.edit() : this.add();
        }
      });
    },
    title(type) {
      switch (type) {
        case 0:
          if (this.type == 0) {
            this.title_txt = "添加库区：";
            this.txt = "库区：";
          }
          break;
        case 1:
          if (this.type == 1) {
            this.title_txt = "添加货架：";
            this.txt = "货架：";
          }
          break;
        case 3:
          if (this.type == 3) {
            this.title_txt = "添加货位：";
            this.txt = "货位：";
          }
          break;
        case 2:
          if (this.type == 2) {
            this.title_txt = "编辑库区/货架/货位：";
            this.txt = "库区/货架/货位：";
          }
          break;
      }
    }
  },
  created() {
    // 列表
    this.reservoir_index();
  }
};
</script>
<style lang="scss" scoped>
.main_tree {
  padding-bottom: 20px;
  margin-top: 16px;
  .main_tree_h {
    span {
      &:last-child {
        margin-right: 40px;
      }
    }
  }
}

.newConBox.on {
  margin-left: -10px;
  padding-left: 10px;
}
</style>